
let globalThis = window;

require('./css/ui.css');

let Range = require('./ui/range');
// let CheckBox = require('./ui/checkBox');
// let Spinner = require('./ui/spinner');
let P3 = require('./ui/p3');
let Panel = require('./ui/panel');
let ColorChoose = require('./ui/colorChoose');

//
let hotkeys  = require('hotkeys-js').default;

function createCanvas(width, height) {
    let canvas = globalThis.document.createElement('canvas');
    canvas.width = canvas.clientWidth = width;
    canvas.height = canvas.clientHeight = height;
    canvas.style.background = '#ffffff';
    return canvas;
}

const createDiv = () => globalThis.document.createElement('div');

function createEnvPanel(){
    let panel = new Panel({name:'全局设置'});

    // 环境光
    let uiAmbientLightColor = new ColorChoose({name:'环境光颜色'});
    panel.add(uiAmbientLightColor.element);

    let uiAmbientIntensity = new Range({cur:0.3,name:'环境光强度'});
    panel.add(uiAmbientIntensity.element);


    // 光的方向
    let uiLightDir = new P3({x:1,y:1,z:1,name:'方向光'});
    panel.add(uiLightDir.element);

    // 光的颜色
    let uiLightColor = new ColorChoose({name:'方向光颜色'});
    panel.add(uiLightColor.element);

    // 相机
    let uiCameraPos = new P3({x:0,y:0,z:10,name:'相机位置'});
    panel.add(uiCameraPos.element);

    //

    return panel;
}

globalThis.onload = function () {

    // 创建一个 固定大小/全屏的 canvas
    let canvasEl = createCanvas(640, 480);
    globalThis.document.body.appendChild(canvasEl);

    // console.log(hotkeys);
    // hotkeys('ctrl+a,ctrl+b,r,f',function(event,handler){
    //     switch (handler.key) {
    //         case 'ctrl+a':
    //             console.log('ctrl+a clicked!');
    //             break;
    //     }
    // });
    //
    // hotkeys('f5', function(event, handler){
    //     // Prevent the default refresh event under WINDOWS system
    //     event.preventDefault();
    //     console.log('you pressed F5!');
    // });

    // hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
    //     switch (handler.key) {
    //         case 'ctrl+a': console.log('you pressed ctrl+a!');
    //             break;
    //         case 'ctrl+b': console.log('you pressed ctrl+b!');
    //             break;
    //         case 'r': console.log('you pressed r!');
    //             break;
    //         case 'f': console.log('you pressed f!');
    //             break;
    //         default: console.log(event);
    //     }
    // });

    // let guiDiv = createDiv();
    // guiDiv.classList.add('gui');
    // globalThis.document.body.appendChild(guiDiv);
    //
    // let envPanel = createEnvPanel();
    // guiDiv.appendChild(envPanel.element);

    // let range = new Range({
    //     cur: 0.2,
    //     min: -1,
    //     max: 1,
    //     step: 0.3,
    //     name: '数字1'
    // });
    // guiDiv.appendChild(range.element);
    //
    // let range2 = new Range({cur: 0.5, name: '身高'});
    // guiDiv.appendChild(range2.element);
    //
    // let checkbox = new CheckBox('男', false);
    // guiDiv.appendChild(checkbox.element);
    //
    // let spinner = new Spinner(1,
    //     ['java', 'c++', 'haskell'],
    //     '请选择一个语言'
    // );
    // guiDiv.appendChild(spinner.element);
    //
    // let p3 = new P3({x: 1, y: 2, z: 3, name: '光'});
    // guiDiv.appendChild(p3.element);
};
